<template>
  <div class="pages account">
    <div class="pageLevel" v-if="!sub">
      <!-- 头部 -->
      <el-form ref="form" :model="form" label-width="111px" class="form-class">
        <el-form-item label="当前账户：">
          <div class="accounts">
            <span v-if="disabled!=0">{{form.accountName}}</span>
            <span class="span1" v-if="disabled==0">未开户，请联系客服</span>
          </div>
        </el-form-item>
      </el-form>
      <div class="content1">
        <div class="from_main infon">
          <div class="infon_text">
            <span class="infon_shu"></span>
            <span class="infon_text_t"> 基础信息</span>
          </div>
        </div>
        <el-form ref="form" :model="form" label-width="111px" class="form-class">
          <el-form-item label="总资产：" style="margin-top: 25px;" v-if='setRole("总资产")'>
            <div>{{form.amtBalamt}}
              <el-button v-if='setRole("充值")' type="medium" style="position: absolute; left:180px;" :disabled="disabled==0 || disabled==1  || disabled==2" @click="routerPush('finance-account/finance-recharge',showTab)">充值</el-button>
            </div>
          </el-form-item>
          <el-form-item label="可提现金额：" style="margin-top: 25px;" v-if='setRole("可提现金额")'>
            <div>{{form.amtUseamt}}
              <el-button type="medium" v-if='setRole("提现")' style="position: absolute; left:180px;" :disabled="disabled==0 || disabled==1 || disabled==2" @click="routerPush('finance-account/finance-cash',showTab )">提现</el-button>
            </div>
          </el-form-item>
          <el-form-item label="冻结中金额：" style="margin-top: 25px;" v-if='setRole("冻结中金额")'>
            <div>{{form.amtFrzamt}}</div>
          </el-form-item>
          <el-form-item label="提现银行卡：" style="margin-top: 25px;" v-if='setRole("提现银行卡")'>
            <div><span v-if="form.bankCardNumbers"> {{form.bankName}} ( {{form.bankCardNumbers}} ) </span>
              <el-button type="medium" style="position: absolute; left:180px;" v-if="disabled==3&&setRole('变更')" @click="routerPushs('finance-account/finance-boundCard',showTab,'1')">变更 </el-button>
              <!-- <el-button type="medium" style="margin-left: 50px;" v-if="disabled==2" @click="routerPush('boundCard',{showTab: showTab })">验证</el-button> -->
              <el-button type="medium" style="position: absolute; left:180px;" v-if="(disabled==0|| disabled==1)&&setRole('绑卡')" :disabled="disabled==0" @click="routerPushty('finance-account/finance-boundCard', showTab,'0' )"> 绑卡</el-button>
              <el-button type="medium" style="position: absolute; left:180px;" v-if="disabled==2&&setRole('验证')" @click="routerPush('finance-account/finance-verify', showTab)"> 金额验证</el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <div class="content">
        <div class="from_main infon">
          <div class="infon_text">
            <span class="infon_shu"></span>
            <span class="infon_text_t" v-if='setRole("快捷支付卡")'>快捷支付卡</span>
          </div>
        </div>
        <el-button type="primary" v-if='setRole("添加银行卡")' style="margin:20px 0 0 30px;" :disabled="disabled==0 || disabled==1  || disabled==2" @click="routerPush('finance-account/finance-addCard', showTab)">添加银行卡</el-button>
        <div class="forms" v-if='setRole("快捷支付卡")'>
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column type="index" label="序号" width="200" align="center"></el-table-column>
            <el-table-column prop="bankName" label="银行卡" width="200" align="center">
              <template slot-scope="scope">
                <span>{{scope.row.bankName}}</span>
                <span> ( {{scope.row.accnos}} ) </span>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="操作" align="center" width="200">
              <template slot-scope="scope">
                <el-button type="text" size="mini" v-if="scope.row.dr=='1'&&setRole('解除绑定')" :disabled="disabled==0 || disabled==1  || disabled==2" @click="deleteAccessUser(scope.row)">解除绑定</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <div class="pageLevel" v-else>
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import util from "@/util";
import { getAccountInfo, quickPayment, bankCardList } from "@/api";
export default {
  computed: mapState(["merchantId", "sub", "power"]),
  data() {
    return {
      message: {}, //账号信息
      showTab: 0, // 0=对公  1=对个人
      tableData: [],
      disabled: null, // 0=未开户  1=已开户未绑卡  2=对公已开户已绑卡未验证  3=已开户已绑卡
      form: {
        name: "圣旦品牌公司",
        accountName: "",
        assets: "65.00"
      }
    };
  },
  created() {},
  mounted() {
    this.getAccountInfo(); //账号信息
  },
  watch: {
    sub: {
      handler: function(val, oldVal) {
        if (oldVal != null && val == false) {
          this.getAccountInfo();
        }
      },
      deep: true
    }
  },
  methods: {
    // 分配权限
    setRole(key) {
      return util.selectTitle(this.power, key);
    },
    bankCardList() {
      let data = {
        orgId: this.merchantId
      };
      bankCardList(data).then(res => {
        this.tableData = res.data.list;
        if (this.tableData.length != 0) {
          for (let i = 0; i < this.tableData.length; i++) {
            this.tableData[i].accno.toString();
            let a = this.tableData[i].accno;
            let b = this.tableData[i].accno.length;
            this.tableData[i].accnos = a.substr(b - 4);
          }
        }
      });
    },
    getAccountInfo() {
      let data = {
        orgId: this.merchantId
      };
      getAccountInfo(data).then(res => {
        this.message = res.data;
        this.form = this.message;
        this.form.bankCardNumber.toString();
        let a = this.form.bankCardNumber;
        let b = this.form.bankCardNumber.length;
        this.form.bankCardNumbers = a.substr(b - 4);
        this.message.status = parseInt(this.message.status); //0
        this.message.state = parseInt(this.message.state); //1
        this.message.kd = parseInt(this.message.kd); //1
        this.message.isVerification = parseInt(this.message.isVerification);
        this.showTab = res.data.kd;
        //未开户
        if (this.message.status == 1) {
          this.disabled = 0;
        } else {
          if (this.message.state == 0) {
            //未绑卡
            this.disabled = 1;
          } else {
            this.bankCardList(); //快捷支付卡列表
            if (this.message.kd == 1) {
              //对公
              if (this.message.isVerification == 0) {
                this.disabled = 2;
                this.open2();
              }
              if (this.message.isVerification == 1) {
                this.disabled = 3;
              }
            } else if (this.message.kd == 0) {
              this.disabled = 3;
            }
          }
        }
        // console.log(this.disabled);
      });
    },
    deleteAccessUser(Data) {
      this.$confirm("确定要解除绑定吗?", "提示", {
        center: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        closeOnClickModal: false,
        closeOnPressEscape: false
      })
        .then(() => {
          let data = {
            orgId: this.merchantId,
            bkaccAccno: Data.accno,
            bkaccPhone: Data.phone,
            flag: 2
          };
          quickPayment(data).then(res => {
            this.$confirm(res.data.qpyOpion, "提示", {
              type: "warning",
              showCancelButton: false,
              showConfirmButton: false,
              closeOnClickModal: false,
              closeOnPressEscape: false
            });
            this.bankCardList(); //快捷支付卡列表
          });
        })
        .catch(() => {});
    },
    open2() {
      this.$confirm(
        "您还没有验证结算账户，中金支付向您的 " +
          this.message.bankName +
          " 账户中打入一笔资金（ 0.01-1元钱 ）， 输入正确的打款金额 ，以完成银行账户校验",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          center: true,
          closeOnClickModal: false,
          closeOnPressEscape: false,
          type: "warning"
        }
      )
        .then(() => {
          this.routerPush("finance-account/finance-verify", showTab);
        })
        .catch(() => {
          // this.$message({
          //   type: "info",
          //   message: "已取消删除"
          // });
        });
    },
    routerPush(name, showTab) {
      util.routerTo(name, {
        showTab: showTab
      });
    },
    routerPushty(name, showTab, type) {
      util.routerTo(name, {
        showTab: showTab,
        type: type
      });
    },
    routerPushs(name, param, type) {
      // 变更判断
      if (this.message.isUpdateBankCard == false) {
        this.$alert(this.message.isUpdateMsg, "提示", {
          confirmButtonText: "确定",
          callback: action => {}
        });
      } else {
        util.routerTo(name, {
          showTab: param,
          type: type
        });
      }
    },
    onSubmit() {
      // console.log("submit!");
    }
  }
};
</script>
<style scoped>
.form-class {
  width: 500px;
  margin-top: 10px;
  margin-left: 30px;
}
.accounts .span1 {
  color: red;
  margin-left: 100px;
  font-weight: bold;
}
.forms {
  width: 601px;
  margin-left: 115px;
  margin-top: 60px;
  margin-bottom: 60px;
}
</style>
